<template>
  <div class="dept-list">
    <div class="dept-top">
      <div class="dept-top-sty">
        <div class="title">
          <!-- <span>商务负责人</span>
          <span>(</span>
          <span>{{ itemsLength }}</span>
          <span>)</span> -->
          <uni-data-select v-model="deptName" style="width: auto;" :clear="false" placeholder="请选择部门" :localdata="candidates" @change="changeDept" />
        </div>
        <div class="select-title">
          <span>已选择</span>
          <span>1</span>
          <span>个部门1个人</span>
        </div>
      </div>
    </div>
    <div class="dept-bot">
      <radio-group class="radios" @change="radioChange">
        <view
          v-for="(item, index) in items"
          :key="item.id"
          class="uni-list-cell uni-list-cell-pd radio-group"
          style="height: 32px;"
          @click="commClick(item)"
        >
          <view>{{ item.username }}</view>
          <view>
            <radio
              style="transform: scale(0.6)"
              color="#739ECA"
              :value="item.id"
              :checked="index === current"
            />
          </view>
        </view>
      </radio-group>
    </div>
    <!-- <div class="btn-style">
      <button
        class="btn"
        type="primary"
        hover-class="btn-active"
        :disabled="disabled"
        @click="handleClick"
      >
        确认
      </button>
    </div> -->
  </div>
</template>
<script>
import { getDeptList, getUserFromDept } from '@/apis/project'
export default {
  data() {
    return {
      items: [],
      current: 0,
      itemsLength: 0,
      commId: 0,
      commName: '',
      obj: {},
      deptName: 0,
      candidates: [],
      page: {
        pageNo: 1,
        pageSize: 100,
      },
      deptId: '',
    }
  },
  onLoad(options) {
    this.obj = options
  },
  mounted() {
    // 获取部门List
    this.getDeptList()
    // 获取商务部负责人list
    this.getCommUserList()
  },
  methods: {
    // 单选框点击触发
    radioChange(evt) {
      this.commId = evt.detail.value
      for (let j = 0; j < this.items.length; j++) {
        if (this.items[j].id == this.commId) {
          this.commName = this.items[j].username
        }
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.detail.value) {
          this.current = i
          break
        }
      }
      this.handleClick()
    },
    // 选中行触发
    commClick(data) {
      this.commId = data.id
      for (let j = 0; j < this.items.length; j++) {
        if (this.items[j].id == this.commId) {
          this.commName = this.items[j].username
        }
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].username === data.username) {
          this.current = i
          break
        }
      }
      this.handleClick()
    },
    // 设置选中数据
    setSelectItem(data) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].id.toString() === data.commId) {
          this.current = i
          break
        }
      }
    },
    // 获取部门List
    async getDeptList() {
      this.candidates = []
      const res = await getDeptList()
      if (res.data.length > 0) {
        // eslint-disable-next-line array-callback-return
        res.data.map((key) => {
          if (key.parentId != 0) {
            this.candidates.push({
              value: key.id,
              text: key.name,
            })
          }
        })
      }
      console.log(res, '部门数据筛选')
    },
    // 部门选择触发
    changeDept(evt) {
      this.deptId = evt
      console.log(evt, '选择部门')
      this.getCommUserList()
    },
    // 获取商务部负责人list
    async getCommUserList() {
      const params = {
        deptId: this.deptId,
        ...this.page,
      }
      this.items = []
      // const res = await getUserInfo()
      const res = await getUserFromDept(params)
      // console.log(res, '商务负责人list')
      this.items = res.data.list
      this.itemsLength = this.items.length
      this.setSelectItem(this.obj)
      this.commId = this.items[0].id
      this.commName = this.items[0].username
    },
    // 提交按钮
    handleClick() {
      try {
        uni.setStorageSync('storage_comm', {
          commId: this.commId,
          commName: this.commName,
          type: 'comm',
        })
        uni.$emit('commPageChange', { commId: this.commId, commName: this.commName, type: 'comm' })
      } catch (e) {
        // error
      }
      uni.navigateBack({
        url: `/pages/office/project-approval/index?commId=${this.commId}&commName=${this.commName}&type=comm`,
      })
      // uni.redirectTo({
      //   url: `/pages/office/project-approval/index?commId=${this.commId}&commName=${this.commName}&type=comm`,
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .uni-select {
  width: 140px;
  // width: auto;
  border: 0px solid #ffffff;
  border-bottom: solid 0px #ffffff;
}
::v-deep .uni-select__input-text {
  width: auto;
}
.dept-list {
  .dept-top {
    padding: 15px 0px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .dept-top-sty {
      width: 93%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .title {
        color: #000;
        font-weight: 600;
        .uni-select {
          border: 0px;
          border-bottom: 0px;
        }
        label {
          font-size: 14px;
        }
      }
      .select-title {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #999;
      }
    }
  }
  .dept-bot {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    width: 93%;
    margin: 0 auto;
    margin-top: 10px;
    .radios {
      // padding: 10px 0px;
      .radio-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0px 5px 0px;
        width: 93%;
        border-bottom: 1px solid #f2f2f2;
        margin: 0 auto;
        font-size: 14px;
        color: #333;
      }
    }
  }
  .btn-style {
    position: absolute;
    left: 13%;
    bottom: 2%;
    .btn {
      width: 280px;
      height: 36px;
      border-radius: 19px;
      border: none;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        border: none;
      }
      &[aria-disabled='true'] {
        background-color: #cccccc;
      }
      &[aria-disabled='false'] {
        background: linear-gradient(180deg, #739eca 0%, #abcde7 100%);
        &.btn-active {
          background: linear-gradient(180deg, #4d91d4 0%, #9fc8e7 100%);
        }
      }
    }
  }
}
</style>
